import React, { useState, useEffect } from "react";
import { Tabs, SideBar } from "antd-mobile";
import {
  getAknowledgeList,
  getAknowledgeNav,
  getDragNav,
  getDragList,
} from "../../../store/sliceReducer/HomeSliceReducer";
import "./index.css";
import { useAppDispatch, useAppSelector } from "../../../store";
import { useNavigate, useParams } from "react-router-dom";
import TopNav from "../../../components/topNav";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const { type } = useParams();
  const [paramsType, setparamsType] = useState<string>("disease");

  const { knowledgeNav, knowledgeList, dragNav, dragList, status } = useAppSelector(
    (state) => state.home
  );
  const topNav = [
    {
      title: "常见病症",
      key: "disease",
      id: "1",
    },
    {
      title: "常见药品",
      key: "drug",
      id: "2",
    },
  ];
  // 常见病症需要
  const [activeKey, setActiveKey] = useState("7");
  const [activeNum, setActiveNum] = useState("7");
  // 常用药品需要
  const [activeDrug, setActiveDrug] = useState("1");
  const [activeDrugNum, setActiveDrugNum] = useState("1");
  useEffect(() => {
    setparamsType(type as string);
    dispatch(getAknowledgeNav());
    dispatch(getDragNav());
  }, [dispatch,type]);

  useEffect(() => {
    dispatch(getAknowledgeList(Number(activeKey)));
  }, [activeKey,dispatch]);

  useEffect(() => {
    const params = {
      drugsCategoryId: activeDrug,
      page: 1,
      count: 20,
    };
    dispatch(getDragList(params));
  }, [dispatch,activeDrug]);
  // 顶部tab切
  const typeChange = (val: string) => {
    setparamsType(val);
  };


  return (
    <div className="repositoryBox">
              <TopNav title="知识宝典" />
      <div className="repository_content">
        {status === 'loading' && (
          <div style={{ textAlign: 'center', padding: '20px' }}>
            加载中...
          </div>
        )}
        <Tabs activeKey={paramsType} onChange={(val) => typeChange(val)}>
          {topNav.map((v) => {
            if (v.key == "disease") {
              return (
                <Tabs.Tab title={v.title} key={v.key}>
                  <div className="container">
                    <div className="side">
                      <SideBar
                        activeKey={activeKey}
                        onChange={(key) => {
                          // console.log(key);
                          setActiveNum(key);
                          setActiveKey(key);
                        }}
                      >
                        {knowledgeNav && Array.isArray(knowledgeNav) &&
                          knowledgeNav.map((item) => (
                            <SideBar.Item
                              key={String(item.id)}
                              title={item.departmentName}
                            />
                          ))}
                      </SideBar>
                    </div>
                    <div className="main">
                      <div
                        className={
                          activeKey == activeNum ? "content active" : "content"
                        }
                      >
                        {knowledgeList && Array.isArray(knowledgeList) &&
                          knowledgeList.map((v: any) => {
                            return (
                              <div
                                key={v.id}
                                className="text"
                                onClick={() =>
                                  navigate(`/AknowledgeDetail/disease/${v.id}`)
                                }
                              >
                                {v.name}
                              </div>
                            );
                          })}
                      </div>
                    </div>
                  </div>
                </Tabs.Tab>
              );
            } else {
              return (
                <Tabs.Tab title={v.title} key={v.key}>
                  <div className="container">
                    <div className="side">
                      <SideBar
                        activeKey={String(activeDrug)}
                        onChange={(key) => {
                          
                          setActiveDrug(key);
                          setActiveDrugNum(key);
                        }}
                      >
                        {dragNav && Array.isArray(dragNav) &&
                          dragNav.map((item) => (
                            <SideBar.Item
                              key={String(item.id)}
                              title={item.name}
                            />
                          ))}
                      </SideBar>
                    </div>
                    <div className="main">
                      <div
                        className={
                          activeDrug == activeDrugNum
                            ? "content active"
                            : "content"
                        }
                      >
                        <div className="dragList">
                          {dragList && Array.isArray(dragList) &&
                            dragList.map((v: any) => {
                              return (
                                <div
                                  key={v.id}
                                  className="drag"
                                  onClick={() =>
                                    navigate(`/AknowledgeDetail/drug/${v.id}`)
                                  }
                                >
                                  <img
                                    src={v.picture}
                                    className="dragimg"
                                    alt=""
                                  />
                                  <div className="dragname">{v.name}</div>
                                </div>
                              );
                            })}
                        </div>
                      </div>
                    </div>
                  </div>
                </Tabs.Tab>
              );
            }
          })}
        </Tabs>
      </div>
    </div>
  );
};

export default Index;
